import React, { Component } from 'react'

import { TransitionGroup, CSSTransition } from 'react-transition-group'
import '../../assets/animate.min.css'

import {
  Ulist
} from './styles'

import connect from './connect'

@connect
class Index extends Component {

  adduser = () => {
    this.props.addUser({
      id: 3,
      name: '王小二'
    })
  }

  render() {
    return (
      <>
        <Ulist>
          <TransitionGroup>
            {
              this.props.users.map((item,index) => (
                <CSSTransition
                  key={index}
                  timeout={600}
                  unmountOnExit
                  classNames={{
                    enter: 'animate__animated',
                    exit: 'animate__animated',
                    enterActive: 'animate__bounceIn',
                    exitActive: 'animate__bounceOut'
                  }}
                >
                  <li>{item.get('name')}</li>
                </CSSTransition>
              ))
            }
          </TransitionGroup>
        </Ulist>
        <button onClick={this.adduser}>添加用户</button>
      </>
    )
  }
}

export default Index
